<script setup lang="ts">
defineOptions({name: 'UserSearch'})
import {useI18n} from 'vue-i18n'

const {t} = useI18n()

interface Props {
	enumData?: Record<string, any>
	languageData?: Record<string, any>
}

interface Emits {
	(e: 'search', params: Record<string, any>): void

	(e: 'reset', params: Record<string, any>): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()
const searchFormRef = ref()
const searchFormItems = ref<any>([
	{
		prop: 'name', key: 'name', type: 'input', placeholder: t('common.inputPlaceholder'),
		clearable: true, precisionAndAmbiguity: ['name', 'nameLike'],
	},
	{
		initValue: '13',
		prop: 'mobile', key: 'mobileLike', type: 'input', placeholder: t('common.inputPlaceholder'),
		clearable: true, precisionAndAmbiguity: ['mobile', 'mobileLike'],
	},
	{
		prop: 'username', key: 'username', type: 'input', placeholder: t('common.inputPlaceholder'),
		clearable: true, precisionAndAmbiguity: ['username', 'usernameLike'],
	},
	{
		prop: 'status', key: 'status', type: 'select', placeholder: t('common.selectPlaceholder'),
		clearable: true
	},
	{
		prop: 'loginLastIp', key: 'loginLastIp', type: 'input', placeholder: t('common.inputPlaceholder'),
		clearable: true, precisionAndAmbiguity: ['loginLastIp', 'loginLastIpLike'],
	},
	{
		prop: 'loginFinallyIp', key: 'loginFinallyIp', type: 'input',
		placeholder: t('common.inputPlaceholder'), clearable: true,
		precisionAndAmbiguity: ['loginFinallyIp', 'loginFinallyIpLike'],
	},
	{
		prop: 'loginLastTime', key: 'loginLastTimeBetween', type: 'datetime', clearable: true,
		toTimestamp: true,
		props: {
			type: 'datetimerange',
			valueFormat: 'YYYY-MM-DD HH:mm:ss',
			rangeSeparator: t('common.dateTimeRange.separator'),
			startPlaceholder: t('common.dateTimeRange.start'),
			endPlaceholder: t('common.dateTimeRange.end')
		}
	},
	{
		prop: 'loginFinallyTime', key: 'loginFinallyTimeBetween', type: 'datetime', clearable: true,
		toTimestamp: true,
		props: {
			type: 'datetimerange',
			valueFormat: 'YYYY-MM-DD HH:mm:ss',
			rangeSeparator: t('common.dateTimeRange.separator'),
			startPlaceholder: t('common.dateTimeRange.start'),
			endPlaceholder: t('common.dateTimeRange.end')
		}
	},
	{
		label: t('common.field.createTime'), key: 'createTimeBetween', type: 'datetime', clearable: true,
		toTimestamp: true,
		props: {
			type: 'datetimerange',
			valueFormat: 'YYYY-MM-DD HH:mm:ss',
			rangeSeparator: t('common.dateTimeRange.separator'),
			startPlaceholder: t('common.dateTimeRange.start'),
			endPlaceholder: t('common.dateTimeRange.end')
		}
	},
	{
		label: t('common.field.updateTime'), key: 'updateTimeBetween', type: 'datetime', clearable: true,
		toTimestamp: true,
		props: {
			type: 'datetimerange',
			valueFormat: 'YYYY-MM-DD HH:mm:ss',
			rangeSeparator: t('common.dateTimeRange.separator'),
			startPlaceholder: t('common.dateTimeRange.start'),
			endPlaceholder: t('common.dateTimeRange.end')
		}
	},
])

/**
 * 验证规则
 */
const rules = {
	mobile: [{ required: true, message: t('formRule.required'), trigger: 'blur'}],
	mobileLike: [{ required: true, message: t('formRule.required'), trigger: 'blur'}],
}

watch(() => props.enumData, (newVal: any) => {
	if (newVal.user) {
		searchFormItems.value.forEach((item: any, index: number) => {
			if (item.prop && newVal.user[item.prop]) {
				searchFormItems.value[index].options = newVal.user[item.prop];
			}
		})
	}
}, {immediate: true})

watch(() => props.languageData, (newVal: any) => {
	if (newVal.user) {
		searchFormItems.value.forEach((item: any, index: number) => {
			if (item.prop && newVal.user.field[item.prop]) {
				searchFormItems.value[index].label = newVal.user.field[item.prop];
				searchFormItems.value[index].placeholder = searchFormItems.value[index].placeholder + newVal.user.field[item.prop];
			}
		})
	}
}, {immediate: true})

/**
 * 处理重置
 * @param filterData
 */
const handleReset = (filterData: any) => emit('reset', filterData)

/**
 * 处理搜索
 * @param filterData
 */
const handleSearch = async (filterData: any) => {
	await searchFormRef.value.validate()
	emit('search', filterData)
}

</script>

<template>
	<ArtSearchBar ref="searchFormRef" labelPosition="top" :rules="rules" :items="searchFormItems" @reset="handleReset"
		      @search="handleSearch"/>
</template>

<style scoped lang="scss">

</style>